<template>
  <el-container class="h-100">
    <el-header class="header">
      <Header></Header>
    </el-header>
    <el-container class="contenContainer">
      <el-aside :width="switchWidth ? `${60}px` :  `${200}px`" class="h-100" :style="{backgroundColor: '#333744'}">
        <sub-menu @control-width="handleMenuClick"></sub-menu>
      </el-aside>
      <el-main class="h-100">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import Header from '../components/Header.vue'
import SubMenu from '../components/SubMenu.vue'
import { useStore } from '@/store'

export default defineComponent({
  name: 'Home',
  components: {
    Header,
    SubMenu
  },
  setup () {
    const store = useStore()
    const switchWidth = ref(false)
    const handleMenuClick = () => {
      switchWidth.value = !switchWidth.value
    }
    onMounted(() => {
      store.dispatch('getMenuList')
    })

    return { handleMenuClick, switchWidth }
  }
})
</script>

<style lang="scss" scoped>
.header {
  background: #373d41;
  padding: 0 20px 0 0;
}
.mainBackground {
  background: #000;
}
.el-main {
  background-color: #eaedf1;
}
</style>
